<!DOCTYPE html>
<html lang="en">

<head>
    <title>泵房列表</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/pumpList.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_top">
            <div class="app_header">
                <!-- <div class="app_headerLeft" @click="back">
                    <span class="iconfont icon-arrow-left-bold"></span>
                </div> -->
                <div class="app_headerTitle">泵房</div>
            </div>
            <div class="app_topInput">
                <div class="searchIcon">
                    <nut-icon type="search" color="#D1D1D1" size="14px"></nut-icon>
                </div>
                <nut-textinput class="my-input" @input="searchFun" v-model="inputVal" placeholder="请输入搜索内容"
                    :clearBtnPersonnal="true">
                    <template v-slot:clearBtn>
                        <nut-icon type="cross"></nut-icon>
                    </template>
                </nut-textinput>
            </div>
            <div class="app_topTab">
                <div class="app_tabLeft">
                    <div :class="[tabState == 1?'app_tabLeftActive':'']" @click="tabState = 1">全部</div>
                    <div :class="[tabState == 2?'app_tabLeftActive':'']" @click="tabState = 2">在线</div>
                    <div :class="[tabState == 3?'app_tabLeftActive':'']" @click="tabState = 3">离线</div>
                </div>
                <div class="app_tabRight">
                    <div @click="addressShow = true">全部片区<span class="iconfont icon-arrow-down-bold"></span></div>
                    <div @click="show = true">全部厂商<span class="iconfont icon-arrow-down-bold"></span></div>
                </div>
            </div>
        </div>
        <div class="app_main">
            <div class="app_mainItem" v-for="(item, index) in list" @click="goPumpDetail">
                <div class="app_mainItemIcon">
                    <div class="imgSvg"></div>
                </div>
                <div class="app_mainItemDom">
                    <div class="title str">{{item.name}}</div>
                    <div class="dom">
                        <div :class="[item.state == 1? 'state1':'state2']">
                            <!-- state1在线 state2离线  -->
                            <span></span>{{item.state == 1?'在线':'离线'}}
                        </div>
                        <div class="tips">所属片区：{{item.address}}</div>
                    </div>
                </div>
                <div class="app_mainItemright">
                    <span class="iconfont icon-arrow-right-bold"></span>
                </div>
            </div>
        </div>
        <div id="add_form" class="add"><span class="iconfont icon-add-bold"></span></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                inputVal: '',
                tabState: 1,
                addressShow: false,
                show: false,
                list: [
                    { id: '1', name: '长沙天心区五一大道684号南苑小区1#', state: 1, address: '天心区/芙蓉路/204' },
                    { id: '2', name: '长沙天心区五一大道684号南苑小区1#', state: 1, address: '天心区/芙蓉路/204' },
                    { id: '3', name: '长沙天心区五一大道684号南苑小区1#', state: 2, address: '天心区/芙蓉路/204' },
                    { id: '4', name: '长沙天心区五一大道684号南苑小区1#', state: 2, address: '天心区/芙蓉路/204' },
                    { id: '5', name: '长沙天心区五一大道684号南苑小区1#', state: 1, address: '天心区/芙蓉路/204' },
                    { id: '6', name: '长沙天心区五一大道684号南苑小区1#', state: 2, address: '天心区/芙蓉路/204' },
                    { id: '7', name: '长沙天心区五一大道684号南苑小区1#', state: 1, address: '天心区/芙蓉路/204' },
                    { id: '8', name: '长沙天心区五一大道684号南苑小区1#', state: 1, address: '天心区/芙蓉路/204' },
                    { id: '9', name: '长沙天心区五一大道684号南苑小区1#', state: 2, address: '天心区/芙蓉路/204' },
                    { id: '10', name: '长沙天心区五一大道684号南苑小区1#', state: 1, address: '天心区/芙蓉路/204' },
                ]
            },
            mounted() { },
            methods: {
                searchFun() {
                    console.log('inputVal', this.inputVal)
                },
                goPumpDetail() {
                    window.location.href = './pumpDetail.html'
                }
            }
        })
    </script>
</body>

</html>